<template>
  <div class="s_wrap">
    <div class="top"></div>
    <article id="v2_subwayMap">
      <h1>运行路线图</h1>
      <!-- 主体信息：路线图、下载显示以及车站查看的显示 -->
      <div class="v2_contentsInr">
        <!-- 小标题 -->
        <div class="v2_pageNav">
          <ul>
            <li>
              <a href="#v2_downloads">路线图下载</a>
            </li>
            <li>
              <a href="#v2_about">车站查看</a>
            </li>
            <li>
              <a href="#change">换乘信息</a>
            </li>
          </ul>
        </div>
        <!-- 路线图查看 -->
        <section id="v2_downloads">
          <h2 class="v2_h2Center">路线图下载</h2>
          <p class="v2_lead">点击下载南昌Metro地铁路线图</p>
          <div class="v2_picCol1 v2_mb30">
            <img src="img/subwaymap/subwaymap_All.png" width="950" height="673" alt />
          </div>
          <div class="v2_wrapper">
            <a
              class="v2_link"
              href="img/subwaymap/subwaymap_All.png"
              download="subwaymap_All.png"
              target="_blank"
            >
              <p>
                中文版路线图（中文(简体字) ）
                <span class="v2_normal">（PNG：48.6 KB）</span>
              </p>
            </a>
          </div>
        </section>
        <!-- 车站信息查看 -->
      </div>
      <!-- 车站信息 -->
      <section id="v2_about" class="v2_linkTarget">
        <h2 class="v2_h2Center">车站信息</h2>
        <p class="v2_lead">
          南昌轨道交通线网规划为网格+放射状结构，由5条线路构成，全长198公里，共设站146座。
          <br />第一轮建设规划于2009年7月获得国务院批准，其中1号线一期工程全长28.8公里，设站24座，总投资210亿元，
          <br />已于2015年底建成通车；2号线一期工程全长23.3公里，设站21座，总投资160亿元，现已全面开工建设。
          <br />包括3、4号线和1、2号线二期工程的第二轮建设规划，全长82.3公里，总投资610.9亿元，
          <br />已于2015年5月获得国务院批准。目前，3号线在全面开展房屋征收工作的同时已经启动了12个站点的建设工作，
          <br />计划于2020年通车，4号线相关前期工作已经启动，计划于2021年通车。
          <br />届时，东湖区、西湖区、青山湖区、青云谱区、红谷滩新区、高新区、南昌县、望城新区
          <br />几大片区都将连接覆盖地铁线路，极大方便市民出行。
        </p>
        <h2 id="change" class="v2_h2Center">换乘信息</h2>
        <div class="siteChangeInfo" v-for="searchSite in siteChangeInfo" :key="searchSite.name">
          <div class="searchSite">{{ searchSite.name }}</div>
          <li v-for="item in searchSite.export" :key="item.id">
            <div class="exportinfo" v-for="(t,key) in item" :key="key">
              <div class="export">{{ key }}出口：</div>
              <div class="line">
                <span>公交路线：</span>
                {{t}}
              </div>
            </div>
          </li>
        </div>
      </section>
      <section class="v2_relatedLinksCard">
        <h2 class="v2_h2Center">相关链接</h2>
        <div class="v2_wrapper">
          <a href="#" v-for="(item,index) in $store.state.subwayrelatedLinks" :key="index">
            <div class="s_block">
              <h3>{{item.desc}}</h3>
              <div class="v2_pic">
                <img :src="item.path" width="62" height="63" alt />
              </div>
            </div>
          </a>
        </div>
      </section>
    </article>
  </div>
</template>

<script>
//引入基础数据信息
import store from "../../store/index";

export default {
  store,
  data() {
    return {
      
      //站点换乘信息
      siteChangeInfo: [
        {
          name: "双港",
          export: [{ A: "211,223,304" }, { B: "211,223,304,520" }]
        },
        {
          name: "长江路",
          export: [{ B: "211,223,304,5219,503,506,311" }]
        },
        {
          name: "珠江路",
          export: [
            { A: "19,311,503,506" },
            { B: "311" },
            { C: "19,311,503,506" }
          ]
        },
        {
          name: "庐山南大道",
          export: [{ C: "304,214,223,240" }]
        },
        {
          name: "绿茵路",
          export: [
            { C: "19,22,228,229,503" },
            { D: "19,22,228,229,247,313,512" }
          ]
        },
        {
          name: "卫东",
          export: [{ A: "217" }, { B: "247,503" }, { C: "214" }, { D: "214" }]
        },
        {
          name: "地铁大厦",
          export: [{ B: "221,227,228,229,503,708,313" }, { D: "224,512" }]
        },
        {
          name: "秋水广场",
          export: [
            { B: "221,224,227,228,229,503,512,708,313" },
            { C: "221,224,227,228,229,503,512,708,313" },
            { D: "228" },
            { E: "228" }
          ]
        },
        {
          name: "滕王阁",
          export: [{ A: "205" }, { B: "25,27,5,12,18,20,305,307" }]
        },
        { name: "万寿宫", export: [{ D: "2,18,302,307" }] },
        {
          name: "八一馆",
          export: [
            { A: "33，17，27，205" },
            { C: "2,25,33,232,202,205,302" },
            { D: "5,18,13,305,33" },
            { E: "18,27" }
          ]
        },
        {
          name: "八一广场",
          export: [
            { B: "2,13,301,212,205,230" },
            { D: "10,21,29,206,232" },
            { H: "230" },
            { G: "1,2,4,6,7,10,22,88,202,208,26，机场公交1线" },
            { A: "1,2,4,6,10,22,88,705,303,7,13,215,220,231,308,26,205" }
          ]
        },
        { name: "丁公路北", export: [{ A: "3,4,7,215,220" }] },
        {
          name: "师大南路",
          export: [{ A: "4,13,16,28" }, { B: "16,28,301" }, { D: "18" }]
        },
        { name: "彭家桥", export: [{ C: "308,7,28,220,215,216,36" }] },
        {
          name: "谢家村",
          export: [{ A: "7,216" }, { B: "7,220,208," }, { C: "220,208" }]
        },
        { name: "青山湖大道", export: [{ A: "207,220,308,7" }] },
        {
          name: "高新大道",
          export: [
            { A: "7,207,220,308" },
            { B: "7,207,220,308" },
            { C: "7,207,220,308" },
            { D: "7,207,220,308" }
          ]
        },
        { name: "艾溪湖西", export: [{ D: "7,208,231" }] },
        {
          name: "艾溪湖东",
          export: [
            { A: "208,220,258,308,K220，高铁巴士3路" },
            { B: "208,220,258,308,K220，高铁巴士3路" }
          ]
        },
        {
          name: "太子殿",
          export: [{ A: "220,208,258" }, { B: "220,208,258" }, { C: "226" }]
        },
        {
          name: "奥体中心",
          export: [{ A: "220,308" }, { B: "220,308,208" }, { C: "129,226" }]
        },
        { name: "瑶湖西", export: [{ A1: "226" }, { A2: "226" }] },
        { name: "九龙湖南", export: [{ "2": "501,817,839,850" }] },
        { name: "鹰潭街", export: [{ "4": "39长，501,817,839,850" }] },
        { name: "国博", export: [{ "2": "39长，501，817,839,850" }] },
        {
          name: "南昌西站",
          export: [
            {
              "2":
                "高铁1线，高铁2线，高铁4线，高铁5线，高铁定制线（高铁西客站-火车站西广场、高铁西客站-莲塘），708路，233路，503路"
            }
          ]
        },
        { name: "龙岗", export: [{ "3": "233,503,707,817,839" }] },
        {
          name: "国体中心",
          export: [
            {
              "4":
                "51,503，高铁3线，高铁7线，高铁8线，西客站至莲塘定制线，西客站至火车站定制线"
            }
          ]
        },
        { name: "卧龙山", export: [{ "1": "503" }, { "4": "503" }] },
        { name: "岭北路", export: [{ "2": "503" }] },
        { name: "前湖大道", export: [{ "1": "503,233" }] },
        { name: "学府大道东", export: [{ "4": "503,235" }] }
      ]
    };
  },
  components: {}
};
</script>

<style scoped>
/* 基础样式表引入 */
@import "../../assets/css/common.css";
/* 填充 */
.top {
  width: 100%;
  height: 90px;
  background: #00467e;
}
/* 总体样式 */
.s_wrap {
  margin: 0 auto;
  padding: 0 68px;
  max-width: 1280px;
}
article {
  display: block;
  font-family: Helvetica, Arial, "sans-serif";
  background-size: cover;
  width: 100%;
  height: auto;
}
/* 标题样式 */
h1 {
  position: relative;
  font-size: 2.2rem;
  color: #00467e;
  text-align: center;
  word-break: keep-all;
  padding-bottom: 20px;
  margin-bottom: 42px;
  margin-top: 42px;
}
h1::before,
h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 49px;
  height: 4px;
  background-color: #00a3d9;
  margin-left: -49px;
}
h1::after {
  background-color: #00467e;
  margin-left: 1px;
}
/* 主体内容样式 */
.v2_contentsInr {
  width: 82.9%;
  box-sizing: border-box;
  margin: 0 auto;
}
#v2_subwayMap .v2_pageNav ul {
  margin: 0;
}
.v2_contentsInr .v2_pageNav:first-child ul {
  margin-top: 0;
}
.v2_pageNav ul {
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  list-style: none;
  margin: 80px 0 65px;
}
#v2_subwayMap .v2_pageNav li {
  margin-bottom: 0;
}
.v2_pageNav li {
  background: url("/img/icon_slash.png") no-repeat right center;
  background-size: 9px auto;
  padding: 0 32px 0 0;
  margin: 0 23px 15px 0;
}
.v2_pageNav li:hover {
  cursor: pointer;
}
.v2_contentsInr p,
.v2_contentsInr li {
  line-height: 1.5;
}
.v2_pageNav a {
  display: inline-block;
  background: url("/img/icon_link_down.png") no-repeat left 9px;
  background-size: 12px auto;
  padding-left: 24px;
}
.v2_pageNav li:last-child {
  background: none;
  padding-right: 0;
  margin-right: 0;
}
h2 {
  font-size: 1.8rem;
  color: #00467e;
  text-align: center;
  line-height: 1.5;
  word-break: keep-all;
  margin-bottom: 48px;
}
.v2_h2Center {
  font-size: 1.8rem;
  color: #00467e;
  text-align: center;
  margin: 80px 0 48px;
}
#v2_downloads h2,
#v2_about h2 {
  margin-bottom: 25px;
}
#v2_about{
  box-sizing: border-box;
}
p.v2_lead {
  max-width: 1146px;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 20px;
}
.v2_contentsInr p,
.v2_contentsInr li {
  line-height: 1.5;
}
#v2_downloads .v2_wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
#v2_downloads .v2_wrapper:last-of-type {
  margin-bottom: 0;
}
#v2_downloads .v2_link {
  display: block;
  width: 33.3%;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 14px 3%;
  margin: 0;
  box-sizing: border-box;
  margin-left: 10px;
}
#v2_downloads .v2_link p {
  position: relative;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
#v2_downloads .v2_link .v2_normal {
  font-size: 0.8rem;
  font-weight: normal;
}
#v2_downloads .v2_link p::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  display: block;
  width: 7px;
  height: 12px;
  background: url("/img/icon_arrow_blue.png") no-repeat;
  background-size: contain;
  margin-right: 5px;
}
.v2_relatedLinksCard .v2_wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1146px;
  margin: 0 auto;
}
.v2_relatedLinksCard a {
  position: relative;
  display: flex;
  align-items: center;
  width: 23.1%;
  min-height: 100px;
  text-decoration: none;
  color: #00467e;
  padding-left: 18px;
  border: 1px solid #ccc;
  margin-right: 15px;
}
.v2_relatedLinksCard .s_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.v2_relatedLinksCard h3 {
  font-size: 1rem;
  line-height: 1.25;
  background: url("/img/icon_arrow_blue.png") no-repeat left 3px;
  background-size: 7px auto;
  padding-left: 16px;
}
.v2_relatedLinksCard .v2_pic {
  min-width: 30px;
}
.v2_relatedLinksCard a .v2_pic {
  width: 23.4%;
  margin-right: 4.9%;
}
.v2_relatedLinksCard .v2_pic img {
  width: 100%;
  height: auto;
}
.v2_relatedLinksCard a:hover {
  background-color: #e1e4e7;
}
.v2_breadCrumb {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto 22px;
  margin-top: 30px;
}
.v2_breadCrumb ul {
  display: flex;
  list-style: none;
}
.v2_breadCrumb li {
  font-size: 0.8rem;
  color: #000;
}
.v2_breadCrumb li a {
  color: #00467e;
  text-decoration: none;
}
.v2_breadCrumb li a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  background: url("/img/icon_bread_arrow.png") no-repeat;
  background-size: 6px auto;
  margin: 0 11px;
}
#v2_downloads .v2_lead,
#v2_about .v2_lead {
  margin-bottom: 50px;
}

.v2_contentsInr p,
.v2_contentsInr li {
  line-height: 1.5;
}
p.v2_lead {
  max-width: 1146px;
  font-size: 。8rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 80px;
}
/* 换乘信息 */
.siteChangeInfo {
  max-width: 1146px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.searchSite {
  margin: 10px;
  padding: 5px;
  background: rgb(53, 73, 94);
  color: white;
  border-radius: 5px;
  height: auto;
  line-height: auto;
  width: auto;
  text-align: center;
}
div.export {
  padding: 2px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  background: rgb(127, 207, 171);
  color: white;
  width: 60px;
  margin-right: 10px;
}
.line {
  margin-top: 3px;
  display: flex;
  align-items: center;
}
.line span {
  display: inline-block;
  border-radius: 10px;
  padding: 4px;
  margin-right: 5px;
  color: white;
  background: rgb(255, 131, 68);
}
.exportinfo {
  margin-right: 10px;
  display: flex;
  /* flex-wrap: wrap; */
}
</style>
